<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过渡</title>
    <style>
      img {
        /* CSS3新特性过渡 */
        /* 过渡属性 */
        /* transition-property: transform; */
        /* 过渡持续时间,单位:s */
        /* transition-duration: 3s; */
        /* 过渡延迟时间,单位:s */
        /* transition-delay: 0.5s; */
        /* 过渡时间曲线,默认值ease,表示加速减速;linear表示匀速 */
        /* transition-timing-function: linear; */

        /* 复合属性 */
        transition: transform 3s 0.5s linear;
      }

      img:hover {
        transform: rotateY(360deg);
      }

      input {
        width: 100px;
        transition: width 2s 0.1s linear;
      }

      input:focus {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <img src="img/lunbo.png" alt="" />
    <hr />
    <input type="text" />
  </body>
</html>
